<%-- 
    Document   : step3
    Created on : Feb 11, 2009, 5:37:07 PM
    Author     : heweiya
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<head>
	<link href="<%=request.getContextPath()%>/style/${mode.theme}.css"
		type="text/css" rel="stylesheet" />
	<!--[if IE 6]><link href="<%=request.getContextPath()%>/style/${mode.theme}ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
	<title id="TITLE">${mode.displayTitle} - ${mode.page.displayTitle}</title>
</head>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/script/Dialogs.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/script/Corticon.js"></script>
<div class="content">
	<div class="boxTop">
		<div class="boxTopRt">
			<span></span>
		</div>
	</div>
	<div class="boxMid">
		<div class="boxMidRt">
			<div class="content_top">
				<h2>
					${mode.displayTitle}
				</h2>
				<ul class="way">
					
					<li class="btn_forward${mode.lastPage && !mode.summaryReport ? '_lapse' : ''}">
                        <c:if test="${!mode.lastPage || mode.summaryReport}">
						<a href="#" onclick="Corticon.nextPage(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId});">left</a>
                        </c:if>
                        <c:if test="${mode.lastPage && !mode.summaryReport}">
                            <a href="#" onclick="return false;"></a>
                        </c:if>
					</li>
					<li class="btn_backwards">
						<a href="#" onclick="Corticon.previousPage(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId});">Next page</a>
					</li>

				</ul>
			</div>
			<div class="incontent">
				<div class="inBoxTop">
					<div class="inBoxTopRt">
						<span></span>
					</div>
				</div>
				<div class="inBoxMid">
					<div class="inBoxMidRt">

						<div class="step_box" id="question" name="${mode.page.name}">
							<h3>
								${mode.page.displayTitle}
								<c:if test="${mode.page.helpText != null && mode.page.helpText!=''}">
									<img
										src="<%=request.getContextPath()%>/images/communal/icon_help.gif"
										alt="help" onclick="Corticon.ShowHelp(this,'page')" />
								</c:if>
							</h3>

							<div class="help"
								style="display: none; position: absolute; z-index: 50;"
								id="help_page">
								<div class="top"></div>
								<div class="mid">
									<div class="midRt">
										<h2>
										</h2>

										<p>
											${mode.page.helpText}
										</p>
									</div>
								</div>
								<div class="bottom"></div>
							</div>

							<c:forEach var="question" items="${mode.question}" varStatus="i">
								<div class="box"
									id="q_${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
									pageId="${mode.page.pageId}-${question.sequence}"
									name="${question.name}"
									pageInQuestionID="${question.questionPageId}" uiType="${question.responseType}">
									<div class="boxActiveTop">
										<div class="boxActiveTopRt">
											<span></span>
										</div>
									</div>
									<div class="boxActiveMid">
										<div class="boxActiveMidRt"
											id="previewQuestionSet${i.index + 1}">
											<h4>
												${question.text}
												<c:if
													test="${question.helpText != null && question.helpText!=''}">

													<img
														src="<%=request.getContextPath()%>/images/communal/icon_help.gif"
														alt="help"
														onclick="Corticon.ShowHelp(this,'${question.questionId}')" />
												</c:if>
											</h4>

											<div class="help"
												style="display: none; position: absolute; z-index: 50;"
												id="help_${question.questionId}">
												<div class="top"></div>
												<div class="mid">
													<div class="midRt">

														<p>
															${question.helpText}
														</p>
													</div>
												</div>
												<div class="bottom"></div>
											</div>

											<div class="question_cont ordinal">
												<!--<dl class="line${indentLevel}">-->
												<c:if test="${question.responseType == 'Yes/No'}">
													<p class="form_row">
														<input
															name="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															type="radio" value="Y"
															onclick="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},'Y',${question.questionPageId},'',false)"
															<c:if test="${question.answerValue[0] == 'Y'}">checked="checked"</c:if> />
														Yes
														<input
															name="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															type="radio" value="N"
															onclick="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},'N',${question.questionPageId},'',false)"
															<c:if test="${question.answerValue[0] == 'N'}">checked="checked"</c:if> />
														No
													</p>
												</c:if>

												<c:if test="${question.responseType == 'No/Yes'}">
													<p class="form_row">
														<input
															name="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															type="radio" value="N"
															onclick="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},'N',${question.questionPageId},'',false)"
															<c:if test="${question.answerValue[0] == 'N'}">checked="checked"</c:if> />
														No
														<input
															name="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															type="radio" value="Y"
															onclick="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},'Y',${question.questionPageId},''false)"
															<c:if test="${question.answerValue[0] == 'Y'}">checked="checked"</c:if> />
														Yes
													</p>

												</c:if>

												<c:if test="${question.responseType == 'US States'}">
													<select
														onchange="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},this.options[this.selectedIndex].value,${question.questionPageId},'',false)"
														id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}">
														<c:forEach var="response"
															items="${question.responseEntry}">
															<option value="${response.value}"
																<c:if test="${question.answerValue[0] == response.value}">selected="selected"</c:if>>
																${response.label}
															</option>
														</c:forEach>
													</select>
												</c:if>

												<c:set var="rt" value="${question.responseType}" />
												<c:if
													test="${rt == 'Social Security Number' or rt == 'Phone Number' or rt == 'Email Address'}">
                                ${question.responseEntry[0].label}
                                <c:if test="${rt != 'Display'}">
														<input type="text"
															id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
															value="${question.answerValue[0]}"
															onblur="Corticon.greyText('${mode.dialogId}-${mode.page.pageId}-${question.questionId}')" />
													</c:if>
												</c:if>
												<c:if test="${rt == 'Display'}">
													<input type="text"
														id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
														onblur="Corticon.greyText('${mode.dialogId}-${mode.page.pageId}-${question.questionId}')"
														value="<c:forEach items="${question.answerValue}" var="answerValue">${answerValue}</c:forEach>"
														<c:if test="${question.width != ''}">style='width:${question.width}px;'</c:if>
														readonly="readonly" />
												</c:if>
												
													
														
															<c:if
																test="${question.responseType != '' && question.responseType != 'No/Yes' && question.responseType != 'Yes/No' && question.uiControl == 'Radio Button'}">
																
																<c:forEach var="response" items="${question.responseEntry}"
														varStatus="i">
														<p class="form_row">
																<input
																	name="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
																	type="radio" value="${response.value}"
																	id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
																	onclick="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},'${response.value}',${question.questionPageId},'',false)"
																	<c:if test="${question.answerValue[0] == response.value}">checked="checked"</c:if> />
                                            ${response.label}                                           
                                            </p>
                                            </c:forEach>
                                            				
															</c:if>															
															<c:if test="${question.responseType != '' && question.uiControl == 'Check Box'}">
															<c:forEach var="response" items="${question.responseEntry}"
														varStatus="i">
														<p class="form_row">
														  <c:set var="c" value=";${response.value};"/>
														  <c:set var="allValue" value=";${fn:join(question.answerValue,';')};"/>
																<input
																	name="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
																	type="checkbox" value="${response.value}"
																	id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
																	responseId=""
																	pageInQuestionID="${question.questionPageId}"
																	onclick="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},'${response.value}',${question.questionPageId},${response.responseEntryId},false)"
																	<c:if test="${fn:contains(allValue, fn:trim(c))}">checked</c:if> />
                                            ${response.label}
                                            </p>
                                            </c:forEach>
                                            <br />
															</c:if>
																											
													<p class="form_row">
														<c:if
															test="${question.responseType != 'Social Security Number' && question.responseType != 'Phone Number' && question.responseType != 'Email Address' && question.responseType != '' && question.responseType != 'Display' && question.uiControl == 'Text Box'}">
															<input type="text" value="<c:forEach items="${question.answerValue}" var="answerValue">${answerValue}</c:forEach>"
																id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}" minChar="${question.minResponseValue}" maxChar="${question.maxResponseValue}"
																onblur="Corticon.greyText('${mode.dialogId}-${mode.page.pageId}-${question.questionId}')" style="width:${question.width}px" />
														</c:if>
													</p>
													<p class="form_row">
														<c:if
															test="${question.responseType != '' &&  question.uiControl == 'Text Area'}">
															<textarea rows="${question.rows}" cols="${question.width}" minChar="${question.minResponseValue}" maxChar="${question.maxResponseValue}"
																id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"><c:forEach items="${question.answerValue}" var="answerValue">${answerValue}</c:forEach></textarea>
														</c:if>
													</p>
													<p class="form_row">
												<c:if
													test="${question.responseType != '' && question.responseType != 'US States' &&  question.uiControl == 'Dropdown'}">
													<select
														id="answer${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
														onchange="Corticon.processResponse(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId},${question.questionId},this.options[this.selectedIndex].text,${question.questionPageId},'',false)">
														<option value="">
															Please select...
														</option>
														<c:forEach var="response"
															items="${question.responseEntry}">
															<option value="${response.value}"
																<c:if test="${question.answerValue[0] == response.value}">selected="selected"</c:if>>
																${response.label}
															</option>
														</c:forEach>
													</select>
												</c:if>
												</p>
												<!--</dl>-->
												<p
													id="errorq_${mode.dialogId}-${mode.page.pageId}-${question.questionId}"
													class="wrong"></p>
											</div>

										</div>
									</div>
									<div class="boxActiveBtm">
										<div class="boxActiveBtmRt">
											<span></span>
										</div>
									</div>
								</div>
							</c:forEach>
							<div class="warningLarge" id="warningLarge"
								style="display: none;">
								<ul id="error" name="error">
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="inBoxBtm">
					<div class="inBoxBtmRt">
						<span></span>
					</div>
				</div>
			</div>
			<div class="content_btm">
				<ul>
					<li class="btn_previous_page">
						<a href="#"
							onclick="Corticon.previousPage(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId});">Previous
							page</a>
					</li>

					<li class="btn_next_page${mode.lastPage && !mode.summaryReport ? '_lapse' : ''}">
                        <c:if test="${!mode.lastPage || mode.summaryReport}">
						<a href="#"
							onclick="Corticon.nextPage(${mode.dialogInstanceId},${mode.dialogId},${mode.page.pageId});">Next
							page</a>
                        </c:if>
                        <c:if test="${mode.lastPage && !mode.summaryReport}">
                            <a href="#" onclick="return false;"></a>
                        </c:if>
					</li>
                    
					<li class="btn_finished2" id="finish_btn" style="display:${mode.lastPage ? 'block' : 'none'}">
						<input type="button" value=""
							onclick="Corticon.finish(${mode.dialogId},'${mode.exitPageURL}')"
							class="btn_finished" />
					</li>
				</ul>
			</div>
		</div>
	</div>	
	<div class="boxBtm">
		<div class="boxBtmRt">
			<span></span>
		</div>		
	</div>
</div>